html {font-size:calc(100vw / 7.5);}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {margin:0; padding:0 }
body, button, input, select, textarea {font:400 .4rem/1.5 "Microsoft YaHei", Helvetica, sans-serif;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section, iframe {display:block }
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:500 }
address, cite, dfn, em, var, i {font-style:normal; font-weight:400 }
dfn {font-family:Arial;}
ul, ol {list-style:none;}
a {color:#000; text-decoration:none }
a:hover {-webkit-transition:color .2s linear; -moz-transition:color .2s linear; -ms-transition:color .2s linear; -o-transition:color .2s linear; transition:color .2s linear }
fieldset, img, button, input {border:0 }
img{  
    pointer-events: none;  
}  
button, input, select, textarea {font-size:100%; outline:none;}
table {border-collapse:collapse; border-spacing:0 }
input {-webkit-appearance:none; border-radius:0; width:100%; border:0; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; outline:0 }
a,button,input{ 
    -webkit-tap-highlight-color: transparent;
    -webkit-user-modify: transparent;
}
html,body{
  width: 100%;
}

.cele38{
  width: 100%;
  background-color: #fe7f4d;
  overflow: hidden;
  .header{
    display: block;
    width: 100%;
    height: 9.78rem;
    background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/head.jpg) no-repeat top center;
    background-size: 7.5rem 9.78rem;
  }
  .lot-box{
    width: 100%;
    padding-bottom: 0.7rem;
    .lot-title{
      display: block;
      width: 100%;
      height: 2.08rem;
      background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/title-spites.png) no-repeat 0 0;
      background-size: 7.5rem 12.26rem;
    }
    .regular-prize-btn-box{
      margin: 0.18rem auto 0.22rem;
      height: 0.75rem;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      .regular-prize-btn{
        width: 2.89rem;
        height: 0.75rem;
        background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/button-spites.png) no-repeat;
        background-position-x: 0;
        background-size: 2.89rem 3.27rem;
      }
      .lot-regular-btn{
        margin-right: 0.12rem;
        background-position-y: 0;
      }
      .lot-prize-btn{
        background-position-y: -0.75rem;
      }
    }
    .lot-list-box{
      width: 7rem;
      margin: 0 auto;
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      justify-content: space-between;
      position: relative;
      .lot-list-item{
        margin-bottom: 0.2rem;
        span{
          display: block;
          box-sizing: border-box;
          width: 2.21rem;
          height: 2.21rem;
          border:0.06rem solid #cf435e;
          border-radius: 0.2rem;
          background: #fff url(../images/lot-spites.png) no-repeat;
          background-size: 6.27rem 4.30rem;
        }
      }
      .lot-btn{
        span{
          background-color: #fe7f4d;
          border: none;
          background-position-x: -2.09rem;
          background-position-y: -2.09rem;
        }
      }
      .lot-list-item1, .lot-list-item5{
        span{
          background-position-x: 0;
          background-position-y: 0;
        }
      }
      .lot-list-item2, .lot-list-item6{
        span{
          background-position-x: -2.09rem;
          background-position-y: 0;
        }
      }
      .lot-list-item3, .lot-list-item7{
        span{
          background-position-x: -4.18rem;
          background-position-y: 0;
        }
      }
      .lot-list-item4, .lot-list-item8{
        span{
          background-position-x: 0;
          background-position-y: -2.09rem;
        }
      }
      .lot-active{
        position: relative;
        &:before {
        content:'';
          width: 2.41rem;
          height: 2.41rem;
          border-radius: 0.3rem;
          background-color: #fff36c;
          position: absolute;
          left: -0.1rem;
          top: -0.1rem;
          z-index: 1;
        }
        span{
          border:0.06rem solid #ffdf2e;
          position: relative;
          z-index: 2;
        }
      }
    }
  }
  .leave-message-box{
    width: 100%;
    &:before{
      content: '';
      display: block;
      width: 100%;
      height: 0.6rem;
      background: #fff36c;
      border-radius: 50% / 100% 100% 0 0;
      transform: scale(1.2);
    }
    .message-title{
      height: 3.6rem;
      background-color: #fff36c;
      position: relative;
      .message-bg{
        display: block;
        width: 100%;
        height: 3.65rem;
        background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/title-spites.png) no-repeat 0 -2.08rem;
        background-size: 7.5rem 12.26rem;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
      }
      .msg-regular-btn{
        width: 0.97rem;
        height: 0.97rem;
        background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/button-spites.png) no-repeat 0 -2.29rem;
        background-size: 2.89rem 3.27rem;
        border-radius: 0.97rem;
        position: absolute;
        left: 0.13rem;
        bottom: -0.25rem;
        z-index: 3;
      }
    }
    .message-box-wrapper{
      width: 100%;
      background: #fff36c;
      position: relative;
      .message-box{
        width: 6.68rem;
        height: 6.68rem;
        margin: -0.24rem auto 0;
        border: 0.06rem solid #cf435e;
        background-color: #fff;
        border-radius: 0.2rem;
        .message-scroll{
          width: 6.58rem;
          height: 6.28rem;
          margin-top: 0.2rem;
          overflow-y: scroll;
          position: relative;
          &::-webkit-scrollbar { 
            width: 0.2rem;     
            height: 0;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 0.2rem;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #cecece;
          }
          &::-webkit-scrollbar-track {
            border-radius: 0.2rem;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #ebebeb;
          }
          .message-load-tip{
            width: 100%;
            text-align: center;
            font-size: 0.26rem;
            color: #9e948b;
            position: absolute;
            top: 0.5rem;
          }
          .message-list{
            width: 6rem;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background-color: #fff;
            // top: 6.5rem;
            .message-list-item{
              width: 100%;
              margin:0.35rem 0;
              // border-radius: 0.6rem;
              display: flex;
              display: -webkit-flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              border-bottom: 1px dashed #ccc;
              padding-bottom: 0.2rem;
              .avatar-box{
                width: 0.6rem;
                margin-right: 0.14rem;
                height: 0.6rem;
                border: 0.02rem solid #ccc;
                border-radius: 100%;
                padding: 0.05rem;
                img{
                  display: block;
                  width: 100%;
                  border-radius: 0.6rem;
                }
              }
              .other-info{
                flex: 1;
                .name-num-box{
                  display: flex;
                  flex-wrap: nowrap;
                  justify-content: space-between;
                  margin-bottom: 0.14rem;
                  .info-name{
                    width: 3rem;
                    font-size: 0.27rem;
                    color:#999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .info-num{
                    width: 1.15rem;
                    height: 0.30rem;
                    line-height: 0.30rem;
                    text-align: center;
                    font-size: 0.18rem;
                    color:#fff;
                    background-color: #fe7f4d;
                    border-radius: 0.3rem;
                  }
                }
                .info-content{
                  font-size: 0.29rem;
                  color:#333;
                }
              }
            }
          }
        }
      }
      .message-input-box{
        width:6.68rem;
        height: 0.8rem;
        background-color: #fff;
        border: 0.06rem solid #cf435e;
        border-radius: 0.74rem;
        margin:0.25rem auto 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        .message-input{
          width: 5.0rem;
          margin-left: 0.3rem;
          &::-webkit-input-placeholder { 
            color:#cf435e;
            opacity: 0.3;
          }
          &:-moz-placeholder { 
            color:#cf435e;
            opacity: 0.3;
          }
          &::-moz-placeholder { 
            color:#cf435e;
            opacity: 0.3;
          }
          &:-ms-input-placeholder {
            color:#cf435e;
            opacity: 0.3;
          }
        }
        .message-leave-btn{
          width: 0.72rem;
          height: 0.72rem;
          margin: 0.05rem 0.08rem;
          background:url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/button-spites.png) no-repeat -1.97rem -2.29rem;
          background-size: 2.89rem 3.27rem;
        }
      }
    }
    .acknowledgement{
      padding:0.5rem 0 1.22rem;
      background-color: #fff36c;
      span{
        display: block;
        width: 100%;
        height: 1.13rem;
        background:  url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/title-spites.png) no-repeat 0 -5.74rem;
        background-size: 7.5rem 12.26rem;
      }
    }
  }
  .prod-box{
    width: 100%;
    padding-bottom: 0.55rem;
    position: relative;
    &:before{
      content: '';
      width: 100%;
      height: 0.6rem;
      background: #fe7f4d;
      border-radius: 50% / 100% 100% 0 0;
      transform: scale(1.2);
      position: absolute;
      top: -0.58rem;
      left: 0;
    }
    .prod-title{
      display: block;
      width: 100%;
      height: 2.07rem;
      background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/title-spites.png) no-repeat 0 -6.87rem;
      background-size: 7.5rem 12.26rem;
    }
    .prod-list-box{
      display: flex;
      display: -webkit-flex;
      width: 6.8rem;
      margin:0 auto;
      justify-content: space-between;
      flex-wrap: wrap;
      .prod-list-item{
        box-sizing: border-box;
        width: 3.3rem;
        height: 4.3rem;
        margin-top: 0.26rem;
        background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #e67b87), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #e67b87),
            color-stop(.75, #e67b87), color-stop(.75, transparent),
            to(transparent));  
        background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
        background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
        background-image: -linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
        background-color: #ffb8b4;
        background-size: 6px 6px; 
        border: 0.02rem solid #cf435e;
        border-radius: 0.2rem;
        .prod-item__link{
          display: block;
          box-sizing: border-box;
          width: 100%;
          height: 4.2rem;
          background-color: #fff;
          border:0.06rem solid #cf435e;
          border-radius: 0.16rem 0.16rem 0.2rem 0.2rem;
          position: relative;
          .prod-item__img{
            display: block;
            width: 100%;
            height: 2.16rem;
            margin:0 auto;
            position: relative;
            background-color: #bfbfbf;
            overflow: hidden;
            border-radius: 0.12rem 0.12rem 0 0;
            img{
              display: block;
              width: 100%;
            }
            .prod-item__date{
              width: 96%;
              padding:0 2%;
              height: 0.36rem;
              line-height: 0.36rem;
              font-size: 0.2rem;
              color:#fff;
              position: absolute;
              bottom: 0px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow:ellipsis;
              background-color: rgb(0,0,0);
            }
          }
          .prod-item__tags{
            position: absolute;
            left: 0.06rem;
            top: 0.14rem;
            padding:0 0.14rem;
            height: 0.3rem;
            line-height: 0.35rem;
            font-size: 0.24rem;
            color:#fff;
            border-radius: 0.3rem;
            background-color: #ffa525;
          }
          .prod-item__title{
            width: 96%;
            height: 0.54rem;
            margin: 2% auto;
            line-height: 0.28rem;
            text-align:left;
            font-weight: bold;
            font-size: 0.22rem;
            color:#000;
            overflow: hidden;
          }
          .prod-item__oldprize{
            width: 96%;
            height: 0.28rem;
            margin: 0 auto;
            font-size: 0.19rem;
            color:#999;
            text-decoration: line-through;
          }
          .prod-item__prize{
            width: 96%;
            margin: 0px auto;
            font-weight: bold;
            font-size: 0.22rem;
            color:#cf435e;
            i{
              display: inline-block;
              margin-left: 0.04rem;
              font-style: normal;
              font-size: 0.33rem;
              vertical-align: baseline;
            }
          }
          .prod-item__book{
            box-sizing: border-box;
            display: block;
            margin: 0 auto 2%;
            width: 3rem;
            height: 0.42rem;
            line-height: 0.42rem;
            text-align: center;
            font-size: 0.27rem;
            color:#cf435e;
            background-color: #ffb8b4;
            border: 0.02rem solid #cf435e;
            border-radius: 0.4rem;
            -moz-border-radius: 0.4rem;
            -webkit-border-radius: 0.4rem;
            -o-border-radius: 0.4rem;
            -moz-border-radius: 0.4rem;
          }
        }
      }
    }
    .more-btn{
      display: block;
      margin:0.45rem auto 0;
      width: 2.89rem;
      height: 0.76rem;
      background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/button-spites.png) no-repeat 0 -1.5rem;
      background-size: 2.89rem 3.27rem;
      transform: scale(1.5);
    }
  }
  .logo{
    display: block;
    width: 100%;
    height: 1.86rem;
    background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/title-spites.png) no-repeat 0 -8.95rem;
    background-size: 7.5rem 12.26rem;
  }
  .login-box{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0, 0.5);
    z-index: 99;
    display: none;
    .login-bg{
      width: 6.2rem;
      height: 5.5rem;
      background-color:#fff;
      border: 0.06rem solid #a37c56;
      border-radius: 0.4rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .input-box{
        width: 5.2rem;
        margin:0 auto;
        padding-top: 0.57rem;
        .input-wrap {
          width: 100%;
          height: 0.77rem;
          margin-bottom: 0.4rem;
          font-size: 0.28rem;
          background-color: #ffead6;
          border: 0.04rem solid #a37c56;
          border-radius: 0.2rem;
          position: relative;
          .icon{
            display: inline-block;
            width: 0.35rem;
            height: 0.5rem;
            background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/icon.png) no-repeat;
            background-position-x: 0;
            background-size: 100%;
            position: absolute;
            left: 0.2rem;
            top: 0.13rem;
          }
          .icon-phone{
            background-position-y: 0;
          }
          .icon-imgcode {
            background-position-y: -0.5rem;
          }
          .icon-phonecode {
            background-position-y: -1.0rem;
          }
          input{
            width: 3.6rem;
            height: 0.77rem;
            line-height: 0.77rem;
            padding-left: 0.7rem;
            position: relative;
            z-index: 2;
          }
          .img-code{
            position: absolute;
            right: 0.1rem;
            top:50%;
            transform: translateY(-50%);
            border: 0.04rem solid #a37c56;
            cursor: pointer;
            display: none;
            img{
              display: block;
              width: 100%;
            }
          }
          .phone-code{
            width:1.74rem;
            height: 0.73rem;
            line-height: 0.73rem;
            text-align: center;
            position: absolute;
            right: -0.02rem;
            top: -0.02rem;
            border-radius: 0 0.18rem 0.18rem 0;
            background-color: #a37c56;
            cursor: pointer;
            border: 0.04rem solid #a37c56;
            cursor: pointer;
            .get-phone-code{
              color:#fff;
            }
            .count-time{
              margin-right: 10px;
              color:#fff;
              display: none;
            }
          }
          .placehold-tip {
            width: 3rem;
            height: 0.82rem;
            line-height: 0.82rem;
            font-size: 0.26rem;
            color: #a37c56;
            position: absolute;
            left: 0.7rem;
            top: -0.02rem;
            z-index: 1;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
        .err-tip{
          border-color: #eb4f4f;
          background-color: #ffd8d8;
          .placehold-tip{
            display: block;
            color: #eb4f4f;
          }
        }
      }
      .login-btn{
        display: block;
        width: 4.88rem;
        height: 0.86rem;
        height: 0.86rem;
        text-align: center;
        font-size: 0.4rem;
        font-weight: bold;
        color:#fff;
        background-color: #ff829b;
        border: 0.04rem solid #cc3856;
        border-radius: 0.5rem;
        margin:0 auto;
      }
      .login-disable{
        background-color: #e2c3c9;
      }
      .login-close-btn{
        width: 0.94rem;
        height: 0.94rem;
        background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/button-spites.png) no-repeat -1rem -2.29rem;
        background-size: 2.89rem 3.27rem;
        position: absolute;
        right: -0.1rem;
        top: -0.44rem;
      }
    }
  }
  .tip-box{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: rgba(0,0,0, 0.6);
    display: none;
    .tip-bg{
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
    }
    .tip-content{
      width: 5.9rem;
      padding:0.8rem 0 0.6rem;
      background-color: #fff;
      border: 0.06rem solid #91292a;
      border-radius: 0.4rem;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      &:before{
        content: '';
        width: 6.56rem;
        height: 1.41rem;
        background: url(http://tpn.gzl.com.cn/static/20181122_38anniversaryCelebration_MOBILE/images/title-spites.png) no-repeat 0 -10.85rem;
        background-size: 7.5rem 12.26rem;
        position: absolute;
        left: -0.27rem;
        top: -0.68rem;
      }
      .tip-title{
        margin-bottom: 0.3rem;
        text-align: center;
        font-size: 0.38rem;
        color:#643e1a;
      }
      .tip-txt{
        width: 92%;
        margin: 0 auto;
        text-align: center;
        font-size: 0.28rem;
        color: #643e1a;
      }
      .txt-left{
        text-align: left;
      }
      .tip-btn{
        display: block;
        width: 4.8rem;
        height: 0.78rem;
        margin: 0.4rem auto 0;
        text-align: center;
        line-height: 0.7rem;
        font-family: bold;
        font-size: 0.4rem;
        color:#fff;
        background-color: #ff829b;
        border: 0.04rem solid #cc3856;
        border-radius: 0.78rem;
      }
    }
    .qr{
      width: 5.76rem;
      height: 6.74rem;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: none;
    }
  }
  .explain{
    background-color: #fff;
    margin-top: -0.1rem;
  }
}